<template>
  <view class="container">
    <view class="nav-bar">
      <text class="iconfont icon-back" @tap="goBack">←</text>
      <text class="title">注册账号</text>
    </view>

    <view class="form-area">
      <view class="input-group">
        <text class="input-label">手机号</text>
        <view class="phone-input">
          <input class="input" type="number" placeholder="请输入手机号" v-model="phone" />
          <button class="code-btn" @tap="sendCode">获取验证码</button>
        </view>
      </view>

      <view class="input-group">
        <text class="input-label">验证码</text>
        <input class="input" type="number" placeholder="请输入验证码" v-model="code" />
      </view>

      <view class="input-group">
        <text class="input-label">密码</text>
        <input class="input" type="password" placeholder="请设置6-20位密码" v-model="password" />
      </view>

      <view class="input-group">
        <text class="input-label">确认密码</text>
        <input class="input" type="password" placeholder="请再次输入密码" v-model="confirmPassword" />
      </view>

      <view class="agreement">
        <checkbox :checked="agreed" @tap="toggleAgreement" />
        <text class="agreement-text">我已阅读并同意<text class="link">《用户协议》</text>和<text class="link">《隐私政策》</text></text>
      </view>

      <button class="register-btn" @tap="register">注册</button>

      <view class="login-link">
        <text>已有账号？</text>
        <text class="link" @tap="goToLogin">立即登录</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      phone: '',
      code: '',
      password: '',
      confirmPassword: '',
      agreed: false
    }
  },
  methods: {
    goBack() {
      uni.navigateBack();
    },
    toggleAgreement() {
      this.agreed = !this.agreed;
    },
    sendCode() {
      if (!this.phone || this.phone.length !== 11) {
        uni.showToast({
          title: '请输入正确的手机号',
          icon: 'none'
        });
        return;
      }
      
      // 模拟发送验证码
      uni.showToast({
        title: '验证码已发送',
        icon: 'success'
      });
    },
    register() {
      if (!this.phone || this.phone.length !== 11) {
        uni.showToast({
          title: '请输入正确的手机号',
          icon: 'none'
        });
        return;
      }
      
      if (!this.code) {
        uni.showToast({
          title: '请输入验证码',
          icon: 'none'
        });
        return;
      }
      
      if (!this.password || this.password.length < 6) {
        uni.showToast({
          title: '密码长度不能少于6位',
          icon: 'none'
        });
        return;
      }
      
      if (this.password !== this.confirmPassword) {
        uni.showToast({
          title: '两次输入的密码不一致',
          icon: 'none'
        });
        return;
      }
      
      if (!this.agreed) {
        uni.showToast({
          title: '请阅读并同意用户协议',
          icon: 'none'
        });
        return;
      }
      
      // 模拟注册
      uni.showLoading({
        title: '注册中...'
      });
      
      setTimeout(() => {
        uni.hideLoading();
        uni.showToast({
          title: '注册成功',
          icon: 'success'
        });
        
        // 跳转到登录页
        setTimeout(() => {
          uni.navigateTo({
            url: '/pages/login/login'
          });
        }, 1500);
      }, 2000);
    },
    goToLogin() {
      uni.navigateTo({
        url: '/pages/login/login'
      });
    }
  }
}
</script>

<style>
.container {
  padding: 40rpx;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: #fff;
}

.nav-bar {
  display: flex;
  align-items: center;
  margin-bottom: 40rpx;
}

.icon-back {
  font-size: 40rpx;
  margin-right: 20rpx;
}

.title {
  font-size: 32rpx;
  font-weight: 500;
}

.form-area {
  margin-bottom: 60rpx;
}

.input-group {
  margin-bottom: 30rpx;
}

.input-label {
  font-size: 28rpx;
  color: #4B5563;
  margin-bottom: 10rpx;
  display: block;
}

.input {
  width: 100%;
  height: 90rpx;
  border: 1rpx solid #D1D5DB;
  border-radius: 8rpx;
  padding: 0 20rpx;
  font-size: 28rpx;
}

.phone-input {
  display: flex;
  align-items: center;
}

.phone-input .input {
  flex: 1;
  margin-right: 20rpx;
}

.code-btn {
  width: 200rpx;
  height: 90rpx;
  background-color: #8B5CF6;
  color: #fff;
  border-radius: 8rpx;
  font-size: 24rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.agreement {
  display: flex;
  align-items: center;
  margin-bottom: 40rpx;
}

.agreement-text {
  font-size: 24rpx;
  color: #6B7280;
  margin-left: 10rpx;
}

.link {
  color: #8B5CF6;
}

.register-btn {
  width: 100%;
  height: 90rpx;
  background-color: #8B5CF6;
  color: #fff;
  border-radius: 8rpx;
  font-size: 32rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 30rpx;
}

.login-link {
  display: flex;
  justify-content: center;
  font-size: 28rpx;
  color: #6B7280;
}
</style>